import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useInterval } from 'ahooks';
import './index.scss'

export default function _403() {
  const navigate = useNavigate()
  const [time, setTime] = useState(10);



  const clear = useInterval(() => {
    if (time === 0) {
      navigate('/home')
      return
    }
    setTime(time - 1);
  }, 1000, {
    immediate: true
  });

  useEffect(() => {
    return () => {
      clear()
    }
  }, [])

  return (
    <div className="zz-403 panel">
      <div className='container'>
        <div className="hint-img"></div>
        <p>此页面无权限...</p>
        <p>倒计时<span> {time} </span>秒后 <Link to="/home">返回首页</Link></p>
      </div>
    </div>
  )
}
